<!DOCTYPE html>
{% load static tpl_tags %}
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品绣网</title>
    <link rel="stylesheet" href="{% static 'happy_shop/css/buefy.min.css' %}">
    <link rel="stylesheet" href="{% static 'happy_shop/css/materialdesignicons.min.css' %}">
    <script src="{% static 'happy_shop/js/axios.min.js' %}"></script>
    <!-- <link rel="stylesheet" href="https://jenil.github.io/bulmaswatch/cerulean/bulmaswatch.min.css"> -->
    {% block extra_style %}{% endblock %}
</head>
<style>
    .search {
        width: 600px;
        height: 40px;

    }

    .pos {
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
    }
</style>

<body>
    <header id="header">
        {% block head_top %}
            {% include 'happy_shop/head_top.html' %}
        {% endblock %}
        
        {% block header %}
        {% get_navs as navs %}
        <template>
            <b-navbar wrapper-class="{% block navclass %}container{% endblock %}" type="is-primary" shadow spaced color>
                <template #brand>
                    {% block brand %}
                    <b-navbar-item tag="div">
                        <span class=" is-size-3"><p>品绣网</p></span>
                    </b-navbar-item>
                    {% endblock %}
                </template>
                <template #start>
                    {% block start %}
                    <b-navbar-item href="{% url 'happy_shop:index' %}">
                        首页
                    </b-navbar-item>
                    <b-navbar-item href="{% url 'happy_shop:all_category' %}"
                        {% if 'all_category' in request.path_info %}active{% endif %}>
                        <b-icon
                            pack="mdi"
                            icon="format-list-text"
                            size="is-small">
                        </b-icon>
                        <span>全部分类</span>
                    </b-navbar-item>
                    {% for nav in navs %}
                    <b-navbar-dropdown label="{{ nav.name }}">
                        {% for sub_nav in nav.sub_cates %}
                        <b-navbar-item
                            {% if category.id == sub_nav.id %}active{% endif %}
                            tag="a"
                            href="{% url 'happy_shop:goods' sub_nav.id %}">
                            {{ sub_nav.name }}
                        </b-navbar-item>
                        {% endfor %}
                    </b-navbar-dropdown>
                    {% endfor %}

                    {% endblock %}
                    {% block start_suffix %}{% endblock %}
                </template>

                <template #end>
                    {% block end %}
                    <b-navbar-item tag="div">
                        {% block end_div %}
                        <!-- <div class="buttons">
                            <a class="button is-primary">
                                <strong>Sign up</strong>
                            </a>
                            <a class="button is-light">
                                Log in
                            </a>
                        </div> -->
                        {% endblock %}
                    </b-navbar-item>
                    {% endblock %}
                </template>
            </b-navbar>
        </template>
        {% endblock %}


        <!-- 消息通知 -->
        <div class="container">
            {% if messages %}
            {% for message in messages %}
            <b-notification has-icon auto-close icon="account-check-outline" icon-size="is-small"
                :progress-bar='progressBar' :duration="duration"
                type="{% if message.tags %}is-{{message.tags}} is-light{% endif %}"
                aria-close-label="Close notification">
                {{ message }}
            </b-notification>
            {% endfor %}
            {% endif %}
        </div>
    </header>

    <div id="breadcrumb">
        {% block breadcrumb %}
        <div class="box is-radiusless is-shadowless has-background-light">
            <div class="container">
                {% block breadcrumb_content %}
                <b-breadcrumb align="is-left">
                    <b-breadcrumb-item tag='a' href="{% url 'happy_shop:index' %}">首页</b-breadcrumb-item>
                    <b-breadcrumb-item tag='a'>Docs</b-breadcrumb-item>
                    <b-breadcrumb-item tag='a' active>Breadcrumb</b-breadcrumb-item>
                </b-breadcrumb>
                {% endblock %}
            </div>
        </div>
        {% endblock %}
    </div>

    <!-- 搜索框 -->
    <div id="searchbox pos">
        {% block searchbox %}
        <div class="pt-3 px-3 pos">
            <input class="input is-medium  search inputNew" type="text" placeholder="搜索商品" name="q">
            <button type="submit" class="button is-primary" onclick="hanldSearch()">搜索</button>
        </div>
        {% endblock %}
    </div>


    <div id="banner" class="container">
        {% block banner %}
        <template>
            <b-carousel>
                <b-carousel-item v-for="(carousel, i) in carousels" :key="i">
                    <section :class="`hero is-medium is-${carousel.color}`">
                        <div class="hero-body has-text-centered">
                            <h1 class="title">{$ carousel.text $}</h1>
                        </div>
                    </section>
                </b-carousel-item>
            </b-carousel>
        </template>
        {% endblock %}
    </div>


    <!-- 历史介绍栏 -->
    <div></div>

    {% block footer %}
    <footer class="footer mt-4 has-background-primary">
        <div class="container">
            {% comment %}
            <div class="columns">
                <div class="column">
                    asda
                </div>
                <div class="column">
                    asda
                </div>
                <div class="column">
                    <h1 class="has-text-white is-size-5">购物指南</h1>
                    <ul class="mt-1">
                        <li><a class="has-text-success-light is-size" href="">购物流程</a></li>
                        <li><a class="has-text-success-light is-size" href="">支付方式</a></li>
                        <li><a class="has-text-success-light is-size" href="">售后规则</a></li>
                    </ul>
                </div>
                <div class="column">
                    <h1>配送方式</h1>
                </div>
                <div class="column">
                    <h1>其他说明</h1>
                </div>
                <div class="column">
                    <h1>联系客服</h1>
                </div>
            </div>
            {% endcomment %}
            <nav class="level is-mobile">
                <div class="level-item ">
                    <span class="icon is-large has-text-white mr-1" style="font-size: 3em;">
                        <i class="mdi mdi-basket-plus"></i></span>
                    <div class="has-text-success-light">
                        <p class="heading is-size-6">轻松购物</p>
                        <p class="title has-text-success-light is-size-5">品种齐全</p>
                    </div>
                </div>
                <div class="level-item">
                    <p class="has-text-centered has-text-success-light">|</p>
                </div>
                <div class="level-item ">
                    <span class="icon is-large has-text-white mr-1" style="font-size: 3em;">
                        <i class="mdi mdi-shield-car"></i>
                        <!-- <i class="mdi mdi-rv-truck"></i> -->
                    </span>
                    <div class="has-text-success-light">
                        <p class="heading is-size-6">多仓直发</p>
                        <p class="title has-text-success-light is-size-5">极速配送</p>
                    </div>
                </div>
                <div class="level-item">
                    <p class="has-text-centered has-text-success-light">|</p>
                </div>
                <div class="level-item ">
                    <span class="icon is-large has-text-white mr-1" style="font-size: 3em;">
                        <i class="mdi mdi-ballot"></i></span>
                    <div class="has-text-success-light">
                        <p class="heading is-size-6">精致服务</p>
                        <p class="title has-text-success-light is-size-5">正品行货</p>
                    </div>
                </div>
                <div class="level-item">
                    <p class="has-text-centered has-text-success-light">|</p>
                </div>
                <div class="level-item ">
                    <span class="icon is-large has-text-white mr-1" style="font-size: 3em;">
                        <i class="mdi mdi-wallet-giftcard"></i></span>
                    <div class="has-text-success-light">
                        <p class="heading is-size-6">畅选无忧</p>
                        <p class="title has-text-success-light is-size-5">天天低价</p>
                    </div>
                </div>
                <div class="level-item">
                    <p class="has-text-centered has-text-success-light">|</p>
                </div>
                <div class="level-item ">
                    <span class="icon is-large has-text-white mr-1" style="font-size: 3em;">
                        <i class="mdi mdi-hand-heart"></i></span>
                    <div class="has-text-success-light">
                        <p class="heading is-size-6">极速退换</p>
                        <p class="title has-text-success-light is-size-5">无忧售后</p>
                    </div>
                </div>
            </nav>
            <div class=" dropdown-divider"></div>
            <div class="content has-text-centered has-text-white">
                <p>Copyright 2022 by <strong class="has-text-white">品绣网</strong>
                    <a class="has-text-white" href="https://space.bilibili.com/37155629">
                        泠之然</a>. All rights reserved.
                </p>
                <p class="is-size-6">本程序由<a class="has-text-white-ter"
                        href="https://www.djangoproject.com/">Django</a>强力驱动</p>
            </div>
        </div>
    </footer>

    {% endblock %}

    <script src="{% static 'happy_shop/js/vue.js' %}"></script>
    <script src="{% static 'happy_shop/js/buefy.min.js' %}"></script>
    <script src="{% static 'happy_shop/js/request.js' %}"></script>
    <script>
        var base = new Vue({
            el: '#header',
            delimiters: ['{$', '$}'],
            data: {
                navigation: 'home',
                cartNum: '{{ cart_num }}',
                duration: 5000,
                progressBar: true
            },
            methods: {
                logout() {
                    this.$buefy.dialog.confirm({
                        message: '你确定要退出吗？',
                        cancelText: '取消',
                        confirmText: '确认',
                        onConfirm: () => {
                            axios.get("{% url 'happy_shop:logout' %}").then(() => {
                                this.$buefy.toast.open('退出成功!')
                                setTimeout("window.location.reload()", 1500)
                                // window.location.href = '/users/login/';
                            })
                        }
                    })
                },

            }
        })
    </script>
    <script>
        //首页搜索按钮
        function hanldSearch() {
            var value = document.getElementsByClassName('inputNew')[0].value
            if (value == '苗' || value == '馆' || value == '苗馆') {
                window.location.href = 'http://127.0.0.1:8000/happy/goods/2/'
            }

        }
        // 首页 搜索框 回车按钮 跳转页面bug 
        document.onkeydown = function (e) { // 回车提交表单
            // 兼容FF和IE和Opera
            var theEvent = window.event || e;
            var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
            var value = document.getElementsByClassName('inputNew')[0].value
            if (code == 13 && (value == '苗' || value == '馆' || value == '苗馆')) {
                window.location.href = 'http://127.0.0.1:8000/happy/goods/2/'
            }
        }
    </script>
    <script src="{% static 'happy_shop/js/breadcrumb.js' %}"></script>
    {% block extrafootstyle %}{% endblock %}
    {% block vue %}{% endblock %}
</body>


</html>